<template>
  <el-container class="home_container">
    <!-- 头部区域 -->
    <el-header style="height: 106px">
      <div>
        <img src="../assets/img/logo.png" alt="">
        <span><el-input v-model="input3" placeholder="Please input" style="width: 300px;margin-left: 150px" class="search-box-container">
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input></span>
<!--        login先给它隐藏-->
<!--        <el-button style="margin-left: 300px" type="primary" @click="onSubmit" round>Login</el-button>-->
      </div>
    </el-header>
<!--    中间区域-->
    <el-main>
<!--      导航栏-->
      <el-menu
          :default-active="activeIndex"
          active-text-color="#"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
      >
        <el-menu-item index ="1">首页</el-menu-item>
        <el-sub-menu index="2">
          <template #title>学院概况</template>
          <el-menu-item index="2-1">学院简介</el-menu-item>
          <el-menu-item index="2-2">组织机构</el-menu-item>
          <el-menu-item index="2-3">工作人员</el-menu-item>
          <el-menu-item index="2-4">导师风采</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>创客梦工厂</template>
          <el-menu-item index="3-1">创新中心</el-menu-item>
          <el-menu-item index="3-2">创客空间</el-menu-item>
          <el-menu-item index="3-3">创意吧</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>创业政策</template>
          <el-menu-item index="4-1">国家政策</el-menu-item>
          <el-menu-item index="4-2">省市政策</el-menu-item>
          <el-menu-item index="4-3">学校政策</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>科技竞赛</template>
          <el-menu-item index="5-1">国家级赛事</el-menu-item>
          <el-menu-item index="5-2">省级赛事</el-menu-item>
          <el-menu-item index="5-3">校级大赛</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>双创项目</template>
          <el-menu-item index="6-1">大创项目</el-menu-item>
          <el-menu-item index="6-2">科创基金项目</el-menu-item>
          <el-menu-item index="6-3">双创项目管理平台</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7">
          <template #title>互联网+大赛</template>
          <el-menu-item index="7-1">大赛简介</el-menu-item>
          <el-menu-item index="7-2">资料下载</el-menu-item>
          <el-menu-item index="7-3">项目展示</el-menu-item>
          <el-menu-item index="7-4">大学生创业服务网</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="8">
          <template #title>双创联盟</template>
          <el-menu-item index="8-1">联盟简介</el-menu-item>
          <el-menu-item index="8-2">组织机构</el-menu-item>
          <el-menu-item index="8-3">联盟章程</el-menu-item>
          <el-menu-item index="8-4">联盟活动</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="9">
          <template #title>双创讲堂</template>
          <el-menu-item index="9-1">创新创业大讲堂</el-menu-item>
          <el-menu-item index="9-2">专题讲座</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="10">
          <template #title>综合服务</template>
          <el-menu-item index="10-1">咨询服务</el-menu-item>
          <el-menu-item index="10-2">学生组织</el-menu-item>
          <el-menu-item index="10-3">导师预约</el-menu-item>
          <el-menu-item index="10-4">讨论室预约</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="11">
          <template #title>规章制度</template>
          <el-menu-item index="11-1">学院职责</el-menu-item>
          <el-menu-item index="11-2">创新中心职责</el-menu-item>
          <el-menu-item index="11-3">安全管理</el-menu-item>
          <el-menu-item index="11-4">使用流程</el-menu-item>
          <el-menu-item index="11-5">资料下载</el-menu-item>
        </el-sub-menu>
        <el-menu-item index ="12">竞赛管理平台</el-menu-item>
      </el-menu>
<!--      轮播图，用的是swiper-->
      <magic-swiper :list="list" style="height: 500px"></magic-swiper>
<!--      main的home部分-->
      <div>
        <header style="width: 50%;text-align: left;padding-right: 100px">
          <img class="image-notice" src="../assets/img/tubiao_13.png" alt="">
          <span style=" position: relative;
                        bottom: 10px;
                        color: #485661;
                        font-size: 22px;">双创要闻</span>
          <el-button style="float: right;margin-top: 21px" type="success" round>more</el-button>
        </header>
        <header style="width: 50%;text-align: left;padding-right: 100px">
          <img class="image-notice" src="../assets/img/tubiao_13.png" alt="">
          <span style=" position: relative;
                        bottom: 10px;
                        color: #485661;
                        font-size: 22px;">通知公告</span>
          <el-button style="float:right;margin-top: 21px" type="success" round>more</el-button>
        </header>
      </div>
      <!--        <ul class="push-ul" >-->
      <!--          <li class="push" v-for="item in list1" :key="item.noticeId">-->
      <!--            <span >{{item.noticeTittle}}</span>-->
      <!--            <time style="float: right">{{ item.noticePublishTime }}</time>-->
      <!--          </li>-->
      <!--        </ul>-->
      <div>
        <ul class="table-data" style="width: 50%; text-align: left;padding-left: 2px;margin-top: 0px;margin-bottom: 0px;">
          <li v-for="item in tableData" :key="item.id">
            <span>
              <table :itemdata="url" @click="Goto()">{{item.name}}{{ item.date }}</table>
            </span>
            <time style="float:right;" class="fn-right"></time>

          </li>
        </ul>
        <ul class="table-data" style="width: 50%; text-align: left;padding-left: 2px;margin-top: 0px;margin-bottom: 0px;">
          <li v-for="item in tableData" :key="item.id">
            <span @click="Goto(item)">{{ item.name }}</span>
            <time class="fn-right">{{ item.date }}</time>
          </li>
        </ul>
      </div>
      <div>
        <header style="width: 50%;text-align: left;padding-right: 100px">
          <img class="image-notice" src="../assets/img/tubiao_11.png" alt="">
          <span style=" position: relative;
                        bottom: 10px;
                        color: #485661;
                        font-size: 22px;">下载专区</span>
          <el-button style="float: right;margin-top: 21px" type="success" round>more</el-button>
        </header>
        <header style="width: 50%;text-align: left;padding-right: 100px">
          <img class="image-notice" src="../assets/img/tubiao_21.png" alt="">
          <span style=" position: relative;
                        bottom: 10px;
                        color: #485661;
                        font-size: 22px;">竞赛活动</span>
          <el-button style="float:right;margin-top: 21px" type="success" round>more</el-button>
        </header>
      </div>
      <div>
        <ul class="table-data" style="width: 50%; text-align: left;padding-left: 2px;margin-top: 0px;margin-bottom: 0px;">
          <li :tabledata="tableData" v-for="item in tableData" :key="item.id">
            <span @click="Goto(item)">{{ item.name }}</span>
            <time class="fn-right">{{ item.date }}</time>
          </li>
        </ul>
        <ul class="table-data" style="width: 50%; text-align: left;padding-left: 2px;margin-top: 0px;margin-bottom: 0px;">
          <li :tabledata="tableData" v-for="item in tableData" :key="item.id">
            <span @click="Goto(item)">{{ item.name }}</span>
            <time class="fn-right">{{ item.date }}</time>
          </li>
        </ul>
      </div>
      <!--main的footer，双创之星-->
      <div style="padding-top: 50px">
        <header style="width: 100%;text-align: left;padding-right: 100px">
          <img class="image-notice" src="../assets/img/tubiao_25.png" alt="">
          <span style=" position: relative;
                        bottom: 10px;
                        color: #485661;
                        font-size: 22px;">双创之星</span>
          <el-button style="float: right;margin-top: 21px" type="success" round>more</el-button>
        </header>
      </div>
      <ul class="image-star">
        <li :list1='list1' v-for="item in list1" :key="item.id" @click="linkTo(item)">
            {{item.link}}
        </li>
      </ul>
    </el-main>
    <!--到这里main部分就结束了，下面footer部分-->
    <section class="link-container">
      <div class="margin-auto">
        <span style="padding-left: 50px">友情链接：</span>  <a target="_blank" href="http://www.gsut.edu.cn/w/">兰州理工大学首页</a> <a target="_blank" href="http://202.201.39.53/">兰州理工大学图书馆</a> <a target="_blank" href="http://lutsp.lut.cn/">兰州理工大学科技园</a>  <a href="http://jiuye.lut.cn/" target="_blank">兰州理工大学就业中心</a> <a target="_blank" href="http://tuanwei.lut.cn/">兰州理工大学校团委</a>
      </div>
    </section>
    <el-footer>
      <div class="footer-container margin-auto">
        <div class="footer-logo">
          <figure style="text-align: center">
            <img style="margin-top: 65px" src="../assets/img/logo_bottom.png" alt="logo">
          </figure>
        </div>
        <div class="copy-info">
          <ul style="padding-left: 0px;width: 690px">
            <li>兰州理工大学-Lanzhou University of Technology-奋进求是</li>
            <li>校本部：甘肃省兰州市七里河区兰工坪路287号 (86-0931)-2973715</li>
            <li>西校区：甘肃省兰州市七里河区彭家坪路36号 (86-0931)-2973715</li>
            <li>陇ICP备15002798号</li>
          </ul>
        </div>
        <div class="footer-share">
          <figure style="margin: 0px">
            <img src="../assets/img/erweima_41.png" alt="logo">
          </figure>
          <span>微信公众号</span>
          <div>
            <span class="iconfont icon-weibo"></span> <span class="iconfont icon-tengxunweibo"></span>
          </div>
        </div>
      </div>
    </el-footer>
  </el-container>
</template>

<script lang="ts">
//轮播图
import MagicSwiper from '../components/MagicSwiper.vue'
import table from "@/views1/tables/table.vue"
import {imgbannerdata} from "@/data/swiperdata"
import {imgStarsdata} from "@/data/staesData"
import {tableData} from "@/data/tablesData"
import {defineComponent, ref, reactive, toRefs, provide} from 'vue'
import { Search } from '@element-plus/icons-vue'
import {useRouter} from "vue-router"

export default defineComponent({
  name:'home',
  components:{
    MagicSwiper,
    table,
  },
  setup(){
    const router = useRouter()
    const url = ref(
        '我是主页'
    )

    console.log(url.value);

    function Goto(){
      router.push({path:'/table'})
    }
    const linkTo = () => {
      const imgurl =
      router.push({path:'https://www.baidu.com'})
    }
    return{
      url,
      list:imgbannerdata,
      list1:imgStarsdata,
      Search,
      tableData,
      linkTo,
      Goto
    }
  }
})


</script>

<style scoped>

.el-header{
/*给头部设置弹性布局*/
display: flex;
/*让它贴标左右对齐*/
justify-content: space-between;
/*  清空图片左侧padding*/
  padding-left: 0;
  align-items: baseline;
}
div{
  display: flex;
  align-items: center;
}
el-button{
  padding-left: 30px;
  margin-left: 600px;
}
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
/*走马灯css*/
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin-right: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-main{
  padding: 0;
}
.image-notice {
  justify-content: space-between;
  width: 35px;
  height: 35px;
  margin-top: 21px;
}
ul{
  list-style: none;
}
.image-star li{
  height: 157px;
  display: inline-block;
  float: left;
  cursor: pointer;
  margin-right: 10px;
}
.link-container {
  height: 56px;
  background-color: #4a7eb0;
}
.link-container div {
  width: 1300px;
  line-height: 56px;
  color: white;
  font-size: 16px;
}
.link-container div span {
  font-size: 22px;
  margin-right: 20px;
}
.link-container div a {
  margin-right: 40px;
  text-decoration: none;
  cursor: pointer;
}
.table-data li{
  line-height: 38px;
  border-bottom: 1px dashed #e8e8ea;
  color: #546a7b;
  font-size: 14px;
  cursor: pointer;
  width: 658px;
}
.table-data .fn-right{
  float: right;
}
/*footer部分*/
.el-footer{
  height: 260px;
  background-color: #546a7b;
}
footer .footer-container {
  width: 1500px;
}
footer .footer-container .footer-logo {
  width: 260px;
  float: left;
}
footer .footer-container .footer-logo figure {
  text-align: center;
}
footer .footer-container .footer-logo figure img {
  margin-top: 65px;
}
footer .footer-container .copy-info {
  width: 690px;
  float: left;
}
footer .footer-container .copy-info ul {
  margin-top: 82px;
}
footer .footer-container .copy-info ul li {
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: white;
  text-align: left;
}
footer .footer-container .footer-share {
  width: 105px;
  float: left;
}
footer .footer-container .footer-share figure {
  height: 150px;
}
footer .footer-container .footer-share figure img {
  margin-top: 45px;
}
</style>
